<template>
  <div style="text-align: center">
    <div>
      <h4 v-if="isLogin">当前登录用户: <i style="color: blue">{{currentUser}}</i></h4>
    </div>
      <div class="login-container" v-if="!isLogin">
        <form>
          <el-input type="text" v-model="username" placeholder="用户名"></el-input><br>
          <el-input type="password" v-model="password" placeholder="密码"></el-input><br>
          <el-button type="primary" @click.prevent="handleSubmit">登录</el-button> &nbsp;
        </form>
      </div>
    <div>
      <el-button @click="disSession" type="danger" v-if="isLogin">注销</el-button>
      <br>
      <br>
      <el-text v-if="isLogin">刷新时间毫秒: </el-text>
      <el-input style="width: 80px" v-model.lazy="$store.state.check_time" v-if="isLogin"></el-input>
      <el-button @click="changeCheckTime($store.state.check_time)" type="primary" v-if="isLogin">修改</el-button>

    </div>

    <br>

  </div>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
  name: 'LoginName',
  data() {
    return {
      username: '',
      password: '',
      isLogin: false,
      currentUser: '',
    }
  },
  methods: {
    handleSubmit() {
      // 发送username
      axios.post("/api/login", {username: this.username, password: this.password}).then(
          response => {
            console.log(response.data)
            sessionStorage.setItem('token',response.data.token)
            sessionStorage.setItem('user',response.data.user_name)
            // console.log(response.data.token)
            // this.$router.push({path: '/about'}) //登录成功后,跳转到的路由
            window.location.reload();

          },
          error => {
            console.log('LoginFailed:', error.message)
            alert('LoginFailed:' + error.response.data.message)
          }
      )

    },
    // 取当前session状态
    getSession(){
      let user = sessionStorage.getItem("user");
      console.log(user)
      if (user != null) {
        this.isLogin = true
        this.currentUser = user
      }
    },
    // 清除session
    disSession(){
      // 注销,清除sessionStorage中存储的数据
      sessionStorage.removeItem("token");
      sessionStorage.removeItem("user");
      axios.post("/api/logout", ).then(
          response => {
            console.log(response.data)
            // this.$router.push({path: '/'}) //登出后后,跳转到的路由
            window.location.reload();
          },
          error => {
            console.log('RequestError.', error.message)
          }
      )
    },
    // 修改页面刷新时间store
    changeCheckTime(t){
      if (t >= 10000){
        // 更新store数据必需用commit. vuex
        this.$store.commit('changeState',t)
        // 修改成功消息框
        this.openMessage()
      }else {
        alert('大于等于10000ms.')
      }
    },
    // 修改成功消息框
    openMessage(){
      ElMessage({
        message: 'Change Success.',
        type: 'success',
      })
    }


  },
  mounted() {
    this.getSession()
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.login-container label{
  margin-right: 10px;
  text-align: center;
  width: 50px;
}
.login-container input{
  width: 180px;
  text-align: left;
}
</style>
